<template>
  <div class="issues">
    <a-card class="general-card">
      <template #title>
        <a-space>
          <span class="search-title">问题标题</span>
          <a-input
            v-model="searchParams.title"
            size="small"
            :style="{ width: '196px' }"
            placeholder="请输入"
            allow-clear
            @input="search"
          />
          <!-- <span class="search-title">ID</span>
          <a-input
            v-model="searchParams.projectId"
            size="small"
            :style="{ width: '196px' }"
            placeholder="请输入"
            allow-clear
            @change="search"
          /> -->
        </a-space>
        <a-divider />
      </template>
      <a-row style="margin-bottom: 16px">
        <a-col :span="17" class="card-title">
          <img src="@/assets/images/dashboard/dec@2x.png" />
          <span> 问题 </span>
        </a-col>
        <a-col :span="7">
          <a-space style="float: right">
            <!-- <a-button type="outline" @click="exportAll"> 全部导出 </a-button> -->
            <a-button type="primary" @click="createIssuesDialog">
              创建问题
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table
        v-table-height
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :columns="(cloneColumns as TableColumnData[])"
        :data="renderData"
        :bordered="false"
        :scroll="scroll"
        :scrollbar="true"
        @page-change="onPageChange"
        @page-size-change="pageSizeChange"
        @row-click="issuesInfoView"
      >
        <template #empty>
          <div class="list-empty" :style="'height:' + tableHeight + 'px'">
            <div class="empty-box">
              <img src="@/assets/images/attach-issue/wentkong.png" />
              <div class="text">问题文件暂为空</div>
            </div>
          </div>
        </template>
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
        </template>
        <template #receivers="{ record }">
          {{
            record.issueRecipientList
              .map((item: any) => item.userName)
              .join('、')
          }}
        </template>
        <template #state="{ record }">
          <a-tag v-if="record.state == 0" color="gray" bordered> 未解决 </a-tag>
          <a-tag v-if="record.state == 1" color="green" bordered>
            已完成
          </a-tag>
          <a-tag v-if="record.state == 2" color="blue" bordered> 处理中 </a-tag>
        </template>
        <template #file="{ record }">
          <span>{{
            record.issueFileList.map((item: any) => item.name).join('、')
          }}</span>
        </template>
      </a-table>
    </a-card>
    <createIssues
      v-model:visible="createVisible"
      @refresh="updateData"
    ></createIssues>
    <issuesInfo
      v-model:visible="infoVisible"
      :details-info-row="detailsInfoRow"
    ></issuesInfo>
  </div>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router';
  import { computed, ref, reactive, watch } from 'vue';
  import useLoading from '@/hooks/loading';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import cloneDeep from 'lodash/cloneDeep';
  import { queryissuesList, issuesData, issuesParams } from './api';
  import createIssues from './components/create-issues.vue';
  import issuesInfo from './components/issues-info.vue';

  // 配置
  type Column = TableColumnData & { checked?: true };
  const { loading, setLoading } = useLoading(true);
  const scroll = {
    y: 'calc(100vh - 250px)',
  };

  // 数据
  const generateSearch = () => {
    return {
      title: '',
      // projectId: '',
    };
  };
  const route = useRoute();
  const { projectId }: any = route.params;
  const renderData = ref<issuesData[]>([]);
  const createVisible = ref(false);
  const infoVisible = ref(false);
  const type = ref('add');
  const detailsInfoRow = ref({});

  const searchParams = ref(generateSearch());
  const cloneColumns = ref<Column[]>([]);
  const showColumns = ref<Column[]>([]);

  const pagination = reactive({
    current: 1,
    pageSize: 20,
    showTotal: true,
    showJumper: true,
    showPageSize: true,
    total: 0,
  });
  const columns = computed<TableColumnData[]>(() => [
    {
      title: '序号',
      dataIndex: 'index',
      slotName: 'index',
      width: 80,
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 250,
    },
    // {
    //   title: 'ID',
    //   dataIndex: 'id',
    //   align: 'center',
    // },
    {
      title: '状态',
      dataIndex: 'state',
      slotName: 'state',
      align: 'center',
    },
    {
      title: '发送者',
      dataIndex: 'createBy',
      align: 'center',
    },
    {
      title: '收件人',
      dataIndex: 'receivers',
      align: 'center',
      slotName: 'receivers',
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      align: 'center',
    },
    {
      title: '文件',
      dataIndex: 'file',
      slotName: 'file',
      align: 'center',
      ellipsis: true,
      tooltip: { position: 'left' },
      width: 200,
    },
  ]);
  const fetchData = async (
    params: issuesParams = {
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      projectId,
    }
  ) => {
    setLoading(true);
    try {
      const { data } = await queryissuesList(params);
      renderData.value = data.list;
      pagination.total = data.total;
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };
  const createIssuesDialog = () => {
    type.value = 'add';
    createVisible.value = true;
  };
  const issuesInfoView = (row: any) => {
    infoVisible.value = true;
    detailsInfoRow.value = row;
  };

  const search = () => {
    fetchData({
      ...searchParams.value,
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      projectId,
    } as unknown as issuesParams);
  };
  const onPageChange = (pageNo: number) => {
    pagination.current = pageNo;
    fetchData({
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      projectId,
    });
  };
  const pageSizeChange = (pageSize: number): void => {
    pagination.pageSize = pageSize;
    fetchData({
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      projectId,
    });
  };
  const updateData = () => {
    search();
  };
  const tableHeight = ref(0);
  // table根据父组件计算空白高度
  const vTableHeight = {
    mounted(el: Element) {
      tableHeight.value = Math.max(
        (el.parentElement?.offsetHeight || 0) - 148,
        0
      );
    },
  };
  fetchData();

  watch(
    () => columns.value,
    (val) => {
      cloneColumns.value = cloneDeep(val);
      cloneColumns.value.forEach((item, index) => {
        item.checked = true;
      });
      showColumns.value = cloneDeep(cloneColumns.value);
    },
    { deep: true, immediate: true }
  );
</script>

<script lang="ts">
  export default {
    name: 'issues',
  };
</script>

<style scoped lang="less">
  .issues {
    padding: 0 20px 20px;

    .card-title {
      font-size: 18px;
      color: #1d2129;
      img {
        position: relative;
        top: 3px;
        height: 20px;
      }
    }
    .search-title {
      height: 22px;
      font-size: 14px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #1d2129;
      line-height: 22px;
    }
  }

  .list-empty {
    display: flex;
    align-items: center;
    .empty-box {
      width: 100%;
      text-align: center;
      height: 400px;
      .text {
        width: 100%;
        text-align: center;
        margin-top: -80px;
      }
    }
  }
  :deep(.arco-table-tr) {
    cursor: pointer;
  }
</style>
